import * as mars3d from "mars3d"
import { toRaw } from 'vue';

export const usePolyline = (mapInstance, _graphicLayer) => {
  let graphicLayer: any = null
  const zHeight = 10
  let pipeGraphic = null
  const LINE = {
    normal: [[121.427866, 30.991263, 0], [121.428861, 30.988818, 0], [121.425194, 30.987694, 0], [121.424691, 30.988961, 0]],
    normalHeight: [[121.427866, 30.991263, zHeight], [121.428861, 30.988818, zHeight], [121.425194, 30.987694, zHeight], [121.424691, 30.988961, zHeight]],
    warn: [[121.428861, 30.988818, 0], [121.425194, 30.987694, 0]]
  }

  function initPolyline(type = 1) {
    graphicLayer = toRaw(_graphicLayer.value);

    pipeGraphic = new mars3d.graphic.PolylineVolumePrimitive({
      positions: type === 1 ? LINE.normal : LINE.warn,
      style: {
        shape: "pipeline",
        radius: 2,
        color: type === 1 ? '#00ffff' : 'red',
        opacity: 0.9,
        // label: {
        //   text: "管线text",
        //   font_size: 8,
        //   color: "#ffffff",
        //   distanceDisplayCondition: true,
        //   distanceDisplayCondition_far: 500000,
        //   distanceDisplayCondition_near: 0
        // }
      },
      attr: { remark: "管线" }
    })
    pipeGraphic.addTo(graphicLayer)
    LINE.normalHeight.forEach((item, index) => {
      drawPoint(item, index)
    })
  }

  const drawPoint = (posi, index) => {
    const graphic = new mars3d.graphic.BillboardEntity({
      position: posi,
      style: {
        image: "https://data.mars3d.cn/img/marker/lace-red.png",
        scale: 0.5,
        label: { text: `点位${index + 1}`, pixelOffsetY: -20, font_size: 8, color: '#fff' },
        // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
        highlight: {
          scale: 1
        }
      },
      attr: { remark: "" }
    })
    graphicLayer.addGraphic(graphic)
  }

  function changePipeOffset() {
    // 飞行到指定视角
    mapInstance.value.setCameraView({
      lat: 30.986689,
      lng: 121.422264,
      alt: 62,
      heading: 59.4,
      pitch: -10.2
    }, {
      complete: () => {
        // pipeGraphic.autoSurfaceHeight().then(v => {
        //   console.log(v,'vvvv');
        // })
        // return
        // pipeGraphic.autoSurfaceHeight({
        //   offset: 500,
        // })
        pipeGraphic.positions = LINE.normalHeight
        setTimeout(() => {
          // console.log('隐藏');
          // pipeGraphic.show = false 
          // initPolyline(2)
          // setTimeout(() => {
          //   pipeGraphic.autoSurfaceHeight({
          //     offset: 600,
          //   })
          // },1000)

          pipeGraphic.positions = LINE.normal
        }, 2000)
      }
    })
  }
  return { initPolyline, changePipeOffset }
}